<template>
	<view class="_calendar">
		<view class="_item" v-for="day in date" :key="day.week" @click="chooseDate(day)">
			<view class="_day f-s-16 f-w-b text-center">{{ day.date }}</view>
			<view class="_week f-s-14 u-m-t-20 text-center"
				:class="{ '_week_active': day.date === activeDate,'_today': day.isToDay }">
				{{ day.week }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 引入date.js
	import {
		getNextNumDays
	} from '@/utils/date.js';
	const date = ref(getNextNumDays(7, 'DD'))
	const activeDate = ref(date.value[0].date) // 默认选中第一个日期
	const emit = defineEmits(['backDate'])
	
	const chooseDate = (e) => {
		if(e.date === activeDate.value){
			return
		}
		activeDate.value = e.date 
		emit('backDate',e.fullDate)
	}
</script>

<style lang="scss" scoped>
	._calendar {
		width: 100%;
		// grid布局 7列
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 12px; // 列间距
		margin: 0 auto; // 居中显示
		box-sizing: border-box; // 防止子元素撑开父元素

		._item {
			margin: 0 auto; // 居中显示

			._week {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				border: 1px solid #fff;
			}

			._week_active {
				background: #2080F7; // 当前日期背景颜色
				border: 1px solid #2080F7;
				color: #fff;
			}

			._today {
				border: 1px solid #2080F7; // 当前日期边框颜色;
			}
		}
	}
</style>